//退出
document.querySelector('#logout').addEventListener('click', function() {
    localStorage.removeItem('username')
    localStorage.removeItem('token')
    location.href = './login.html'
})

//渲染登陆用户名
document.querySelector('#usernameText').innerHTML = localStorage.getItem('username')





window.onload = async function() {
    const res = await get('/dashboard')
    console.log(res);
    const {
        data: {
            data: {
                overview,
                year,
                salaryData,
                groupData,
                provinceData
            }
        }
    } = res
    // console.log(overview);
    // console.log(year);
    // console.log(salaryData);
    // console.log(groupData);
    for (let key in overview) {
        document.querySelector('[name=' + key).innerHTML = overview[key]
        renderYear(year)

    }
    renderSalary(salaryData)
    everySalary(groupData)
    initMapChart(provinceData)
    genderSalary(salaryData)
        // 添加事件委托
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function(e) {
        if (e.target.tagName === 'BUTTON') {
            document.querySelector('.btn-blue') ? document.querySelector('.btn-blue').classList.remove('btn-blue') : ''
            e.target.classList.add('btn-blue')
            everySalary(groupData, e.target.innerHTML)
        }
    })
}

//渲染薪资走势
const renderYear = (year) => {
    var myChart = echarts.init(document.getElementById("line"));

    myChart.setOption({
        title: {
            text: "2021全学科薪资走势",
            top: 2,
            left: 5,
        },
        xAxis: {
            type: "category",
            data: year.map(item => item.month),
            axisLine: {
                lineStyle: {
                    color: "#ccc",
                    type: "dashed",
                },
            },
        },
        axisLabel: {
            color: "#999",
        },
        yAxis: {
            type: "value",
            splitLine: {
                lineStyle: {
                    type: "dashed",
                },
            },
        },
        tooltip: {
            trigger: "axis",
        },
        grid: {
            top: "20%",
        },
        color: [{
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0,
                color: "#499FEE",
            }, {
                offset: 1,
                color: "#5D75F0",
            }, ],
        }, ],
        series: [{
            data: year.map((item) => item.salary),
            type: "line",
            smooth: true,
            lineStyle: {
                width: 6,
            },
            symbolSize: 10,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#499FEE",
                }, {
                    offset: 0.8,
                    color: "rgba(255,255,255,0.2)",
                }, {
                    offset: 1,
                    color: "rgba(255,255,255,0)",
                }, ]),
            },
        }, ],
    });
};

//渲染薪资分布
const renderSalary = (salaryData) => {
    var myChart = echarts.init(document.getElementById("salary"));

    myChart.setOption({
        title: {
            text: "班级薪资分布",
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: "6%",
            left: "center",
        },
        color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        series: [{
            name: '班级薪资分布',
            type: 'pie',
            radius: ['50%', '64%'],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false,
            },
            data: salaryData.map(item => {
                return {
                    name: item.label,
                    value: item.g_count + item.g_count
                }
            })
        }]
    });
};

//渲染每组薪资
const everySalary = (data, num = 1) => {
        var myChart = echarts.init(document.getElementById("lines"));
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: data[num].map((item) => item.name),
                axisLine: {
                    lineStyle: {
                        color: "#ccc",
                        type: "dashed",
                    },
                },
                axisLabel: {
                    color: "#999",
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: "dashed",
                    },
                },
            },
            tooltip: {
                trigger: "item",
            },
            color: [{
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                            offset: 0,
                            color: "#34D39A", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(52,211,154,0.2)", // 100% 处的颜色
                        },
                    ],
                },
                {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                            offset: 0,
                            color: "#499FEE", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(73,159,238,0.2)", // 100% 处的颜色
                        },
                    ],
                },
            ],
            grid: {
                left: 70,
                top: 30,
                right: 30,
                bottom: 50,
            },
            series: [{
                    data: data[num].map((item) => item.hope_salary),
                    type: 'bar'
                },
                {
                    data: data[num].map((item) => item.salary),
                    type: 'bar'
                }
            ]
        });

    }
    //渲染籍贯分布
const initMapChart = (provinceData) => {
        const myEchart = echarts.init(document.querySelector('#map'))
        const dataList = [
            { name: '南海诸岛', value: 0 },
            { name: '北京', value: 0 },
            { name: '天津', value: 0 },
            { name: '上海', value: 0 },
            { name: '重庆', value: 0 },
            { name: '河北', value: 0 },
            { name: '河南', value: 0 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '黑龙江', value: 0 },
            { name: '湖南', value: 0 },
            { name: '安徽', value: 0 },
            { name: '山东', value: 0 },
            { name: '新疆', value: 0 },
            { name: '江苏', value: 0 },
            { name: '浙江', value: 0 },
            { name: '江西', value: 0 },
            { name: '湖北', value: 0 },
            { name: '广西', value: 0 },
            { name: '甘肃', value: 0 },
            { name: '山西', value: 0 },
            { name: '内蒙古', value: 0 },
            { name: '陕西', value: 0 },
            { name: '吉林', value: 0 },
            { name: '福建', value: 0 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 0 },
            { name: '青海', value: 0 },
            { name: '西藏', value: 0 },
            { name: '四川', value: 0 },
            { name: '宁夏', value: 0 },
            { name: '海南', value: 0 },
            { name: '台湾', value: 0 },
            { name: '香港', value: 0 },
            { name: '澳门', value: 0 },
        ]
        let option = {
            title: {
                text: '籍贯分布',
                top: 10,
                left: 10,
                textStyle: {
                    fontSize: 16,
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} 位学员',
                borderColor: 'transparent',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff',
                },
            },
            visualMap: {
                min: 0,
                max: 6,
                left: 'left',
                bottom: '20',
                text: ['6', '0'],
                inRange: {
                    color: ['#ffffff', '#0075F0'],
                },
                show: true,
                left: 40,
            },
            geo: {
                map: 'china',
                roam: false,
                zoom: 1.0,
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)',
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)',
                        color: '#e0ffff',
                    },
                    emphasis: {
                        areaColor: '#34D39A',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
            series: [{
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            }, ],
        }
        myEchart.setOption(option)
    }
    //渲染男女薪资
const genderSalary = (data) => {
    const myEchart = echarts.init(document.querySelector("#gender"));
    myEchart.setOption({
        title: [{
                text: "男女薪资分布",
                left: 10,
                top: 10,
                textStyle: {
                    fontSize: 16,
                },
            },
            {
                text: "男生",
                left: "50%",
                top: "45%",
                textAlign: "center",
                textStyle: {
                    fontSize: 12,
                },
            },
            {
                text: "女生",
                left: "50%",
                top: "85%",
                textAlign: "center",
                textStyle: {
                    fontSize: 12,
                },
            },
        ],
        color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        tooltip: {
            trigger: "item",
        },
        series: [{
                type: "pie",
                radius: 50,
                radius: ["20%", "30%"],
                center: ["50%", "30%"],
                datasetIndex: 1,

                data: data.map((item) => ({ name: item.label, value: item.b_count })),
            },
            {
                type: "pie",
                radius: 50,
                radius: ["20%", "30%"],
                center: ["50%", "70%"],
                datasetIndex: 2,
                data: data.map((item) => ({ name: item.label, value: item.g_count })),
            },
        ],
    });
};